<template>
  <div class="container">

    <div class="left">
      <h3>组织架构</h3>
      <el-tree :data="dataSource" node-key="id" @node-click="handleNodeClick" :props="defaultProps" default-expand-all :expand-on-click-node="false">
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <span>{{ node.label }}</span>
            <span>
              <el-icon title="编辑" @click.stop="edit(data)">
                <Edit />
              </el-icon>
              &nbsp;
              <el-icon title="删除" @click.stop="del(data)">
                <Delete />
              </el-icon>
              &nbsp;
              <el-icon title="添加子级" @click.stop="add(data)">
                <Plus />
              </el-icon>
            </span>
          </span>
        </template>
      </el-tree>
    </div>

    <div class="right">
      <div class="top">
        <el-button type="primary" plain @click="addPeople">添加人员</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" width="55" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="deptName" label="所属部门"/>
        <el-table-column prop="position" label="职务" />
        <el-table-column prop="phone" label="手机" />
        <el-table-column prop="telephone" label="固话" />
        <!-- <el-table-column prop="date" label="操作">
        <template #default="scope">
          <el-icon title="编辑" @click="editPerson(scope.row)">
            <Edit />
          </el-icon>
          &nbsp;
          <el-icon title="删除" @click="delPerson(scope.row)">
            <Delete />
          </el-icon>
        </template> </el-table-column> -->
      </el-table>
    </div>

    <!-- 添加人员对话框 -->
    <el-dialog title="新增人员" v-model="open" width="500px" append-to-body>
      <el-form ref="postRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="所属部门" prop="deptId">
          <el-tree-select style="width: 100%;" v-model="form.deptId"
           :data="dataSource" 
           :props="{ value: 'id', label: 'deptName', children: 'children' }"
            value-key="id"
            :render-after-expand="false"
            check-strictly
           >
          </el-tree-select>
        </el-form-item>
        <el-form-item label="职务" prop="position">
          <el-input v-model="form.position" placeholder="请输入职务" />
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入手机" />
        </el-form-item>
        <el-form-item label="固话" prop="telephone">
          <el-input v-model="form.telephone" placeholder="请输入固话" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 添加组织对话框 -->
    <el-dialog :title="title" v-model="openz" width="500px" append-to-body>
      <el-form ref="postRefz" :model="formz" :rules="rules" label-width="80px">
        <el-form-item label="组织名称" prop="deptName">
          <el-input v-model="formz.deptName" placeholder="请输入组织名称" />
        </el-form-item>
        <el-form-item label="组织编码" prop="number">
          <el-input v-model="formz.number" placeholder="请输入组织编码" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFormz">确 定</el-button>
          <el-button @click="cancelz">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import {
    ElMessage,
    ElMessageBox
  } from 'element-plus'
  import {
    // getPersonList,
    addPersonList,
    getPersonBy,
    getTreeList,
    delTreeList,
    addTreeList,
    editTreeList
  } from "@/api/work";
  const {
    proxy
  } = getCurrentInstance();
  const defaultProps = {
    children: 'children',
    label: 'label',
  }

  function getTree() {
    getTreeList().then(res => {
      dataSource.value = res.data
    })
  }
  getTree()
  //树数据
  const dataSource = ref([])
  const title = ref("");
  const openz = ref(false);
  const formz = ref({
    number: '',
    deptName: '',
  });

  function add(data) {
    title.value = "创建组织"
    openz.value = true
    formz.value = {
      number: '',
      deptName: '',
      parentId: data.id
    }
  }

  function edit(data) {
    title.value = "修改组织"
    openz.value = true
    formz.value = data
  }

  function del(data) {
    ElMessageBox.confirm(
        '确认删除吗？',
        'Warning', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
      .then(() => {
        delTreeList(data.id).then(res => {
          ElMessage({
            type: 'success',
            message: '已删除',
          })
          getTree()
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
  }

  function submitFormz() {
    proxy.$refs["postRefz"].validate(valid => {
      if (valid) {
        if (formz.value.id != undefined) {
          editTreeList(formz.value).then(response => {
            proxy.$modal.msgSuccess("修改成功");
            openz.value = false;
            getTree()
          });
        } else {
          addTreeList(formz.value).then(response => {
            proxy.$modal.msgSuccess("新增成功");
            openz.value = false;
            getTree()
          });
        }
      }
    });
  }

  function cancelz() {
    openz.value = false
  }

  /** 节点单击事件 */
function handleNodeClick(data) {
  getPersonBy({deptId:data.id}).then(res=>{
    tableData.value = res.data
  })
}

  const tableData = ref([]);
  //获取数据
  // function getList() {
  //   getPersonList().then(res => {
  //     tableData.value = res.rows
  //   })
  // }
  // getList()
  

  const open = ref(false);
  const data = reactive({
    form: {},
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      postCode: undefined,
      postName: undefined,
      phone: undefined
    },
    rules: {
      phone: [{
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        message: '请输入正确的手机号码',
        trigger: 'blur'
      }],
      // postName: [{ required: true, message: "岗位名称不能为空", trigger: "blur" }],
      // postCode: [{ required: true, message: "岗位编码不能为空", trigger: "blur" }],
      // postSort: [{ required: true, message: "岗位顺序不能为空", trigger: "blur" }],
    }
  });
  const {
    queryParams,
    form,
    rules
  } = toRefs(data);

  function cancel() {
    open.value = false;
    reset();
  }
  /** 表单重置 */
  function reset() {
    form.value = {
      deptId: undefined,
      name: undefined,
      position: undefined,
      phone: undefined,
      telephone: undefined,
    };
    proxy.resetForm("postRef");
  }
  //添加人员
  function addPeople() {
    open.value = true;
  }
  /** 提交按钮 */
  function submitForm() {
    proxy.$refs["postRef"].validate(valid => {
      if (valid) {
        // if (form.value.postId != undefined) {
        //   updatePost(form.value).then(response => {
        //     proxy.$modal.msgSuccess("修改成功");
        //     open.value = false;
        //     getList();
        //   });
        // } else {
          addPersonList(form.value).then(response => {
            proxy.$modal.msgSuccess("新增成功");
            open.value = false;
            getList();
          });
        // }
      }
    });
  }
</script>

<style lang='scss' scoped>
  div {
    box-sizing: border-box;
  }

  .container {
    height: 100%;
    width: 100%;
    padding: 20px;
    display: flex;
  }

  .left {
    width: 40%;
    padding: 0 6px;
  }

  .right {
    width: 60%;
    padding: 0 6px;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

  .top {
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: flex-end;
  }

  :deep(.el-table .el-table__cell) {
    text-align: center;
  }
</style>